<script>
import {
  computed,
  watch,
  watchEffect,
  onMounted,
  ref,
  reactive,
  toRefs,
  Teleport,
} from "vue";
export default {
  setup() {
    const arr = [11, 22, 33];
    const val = ref(0);
    const val1 = computed(() => val.value * 2, {
      onTrack(e) {
        console.log(e, "track");
      },
      onTrigger(e) {
        console.log(e, "trigger");
      },
    });
    const val2 = ref(null);
    const aaa = reactive({
      a: "123",
      b: {
        c: "456",
      },
    });
    const aaa1 = toRefs(aaa);
    console.log("aaa1.a =>", aaa1.b.value.c);
    console.log(aaa1, "toRefsValue");
    watch(
      () => aaa,
      (n, o) => {
        console.log("nodeep", n, o);
      }
    );
    watch(
      () => JSON.parse(JSON.stringify(aaa)),
      (n, o) => {
        console.log("deep", n.b.c, o.b.c);
      },
      {
        deep: true,
        onTrack(e) {
          console.log(e, "watchTrack");
        },
        onTrigger(e) {
          console.log(e, "watchTrigger");
        },
      }
    );
    aaa.b.c = "已修改";
    watch(val, (n, o) => {
      console.log(n, o);
      val2.value = "watch(" + n + ")";
    });
    const val3 = ref(null);
    watchEffect(
      () => {
        console.log(val.value);
        val3.value = "watch(" + val.value + ")";
      },
      {
        onTrigger(e) {
          console.log(e, "watchEffect");
        },
      }
    );
    onMounted(() => {
      //   console.log($refs);
    });

    const toadd = () => {
      console.log(111);
      val.value++;
    };
    return {
      toadd,
      arr,
      val1,
      val,
      val2,
      val3,
    };
  },
  render() {
    return (
      <>
        <div>
          <h2>computed</h2>
          <h3 onClick={() => this.toadd()}>value: {this.val1}</h3>
        </div>
        <hr />
        <div>
          <h2>watch</h2>
          <h3>value: {this.val2}</h3>
        </div>
        <hr />
        <div>
          <h2>watchEffect</h2>
          <h3>value: {this.val3}</h3>
        </div>
        <hr />
        <div>Teleport
          <Teleport to="#nav">
            <h3>这是Teleport in nav</h3>
          </Teleport>
          <Teleport to="#app">
            <h3>这是Teleport in app</h3>
          </Teleport>
        </div>
      </>
    );
  },
};
</script>